<#import "/macro.ftl" as m>
<@m.page_header title='推广统计' />
<div id="page-content-wrapper">
    <div id="page-title">
        <h3>推广统计</h3>
        <p class="font-red mrg10T">停止推广后，统计数据归并到停止推广项显示；全为零统计项不显示；<p>
    </div>
    <div id="page-content">
    	<div class="row">
    		<div class="col-md-5">
    			<#if searchCategory == "TODAY">
                		<#assign todayClass="bg-blue" />
                		<#assign yestodayClass="font-blue" />
                		<#assign latest7dayClass="font-blue" />
                		<#assign latest30dayClass="font-blue" />
                		<#assign allClass="font-blue" />
                	<#elseif searchCategory == "YESTODAY">
                		<#assign todayClass="font-blue" />
                		<#assign yestodayClass="bg-blue" />
                		<#assign latest7dayClass="font-blue" />
                		<#assign latest30dayClass="font-blue" />
                		<#assign allClass="font-blue" />
                	<#elseif searchCategory == "LATEST7DAY">
                		<#assign todayClass="font-blue" />
                		<#assign yestodayClass="font-blue" />
                		<#assign latest7dayClass="bg-blue" />
                		<#assign latest30dayClass="font-blue" />
                		<#assign allClass="font-blue" />
                	<#elseif searchCategory == "LATEST30DAY">
                		<#assign todayClass="font-blue" />
                		<#assign yestodayClass="font-blue" />
                		<#assign latest7dayClass="font-blue" />
                		<#assign latest30dayClass="bg-blue" />
                		<#assign allClass="font-blue" />
                	<#elseif searchCategory == "ALL">
                		<#assign todayClass="font-blue" />
                		<#assign yestodayClass="font-blue" />
                		<#assign latest7dayClass="font-blue" />
                		<#assign latest30dayClass="font-blue" />
                		<#assign allClass="bg-blue" />
                	<#else>
                		<#assign todayClass="font-blue" />
                		<#assign yestodayClass="font-blue" />
                		<#assign latest7dayClass="font-blue" />
                		<#assign latest30dayClass="font-blue" />
                		<#assign allClass="font-blue" />	
                	</#if>
    			<a href="/popularizestatistic/popularizes?searchCategory=TODAY&startDate=${today}&endDate=${today}" class="btn large radius-all-4 ${todayClass}">
		            <span class="button-content">今天</span>
                </a>
                <a href="/popularizestatistic/popularizes?searchCategory=YESTODAY&startDate=${yesterday}&endDate=${yesterday}" class="btn large radius-all-4 ${yestodayClass}">
		            <span class="button-content">昨天</span>
                </a>
                <a href="/popularizestatistic/popularizes?searchCategory=LATEST7DAY&startDate=${day7}&endDate=${today}" class="btn large radius-all-4 ${latest7dayClass}">
		            <span class="button-content">最近7天</span>
                </a>
                <a href="/popularizestatistic/popularizes?searchCategory=LATEST30DAY&startDate=${day30}&endDate=${today}" class="btn large radius-all-4 ${latest30dayClass}">
		            <span class="button-content">最近30天</span>
                </a>
                <a href="/popularizestatistic/popularizes?searchCategory=ALL&startDate=2014-1-1&endDate=${today}" class="btn large radius-all-4 ${allClass}">
		            <span class="button-content">全部</span>
                </a>
    		</div>
    		<div class="form-input col-md-6">
                <div class="row">
                	<div class="col-md-3">
                        <input id="startDate" placeholder="统计从" type="text" name="startDate" value="${startDate?string('yyyy-MM-dd')}" onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd'})">
                    </div>
                    <div class="col-md-3">
                        <input id="endDate" placeholder="到" type="text" name="endDate" value="${endDate?string('yyyy-MM-dd')}" onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd'})">
                    </div>
                    <div class="col-md-1">
                        <a href="javascript:;" class="btn large primary-bg radius-all-4" id="search" title="Validate!" onclick="analyseByDate();">
				            <span class="button-content">
				                查询
				            </span>
		                </a>
                    </div>
                </div>
            </div>
    	</div>
    	<table id="popularizestatistics" class="table mrg10T">
	        <thead>
	            <tr>
	            	<th>推广</th>
	                <th>访问IP数</th>
	                <th>注册数</th>
	                <th>新增交易用户数</th>
	                <th>交易订单数</th>
	                <th>成功交易订单数</th>
	                <th>成功交易金额</th>
	                <th>操作</th>
	            </tr>
	            <tr id="statistic-tr-template" class="hide">
		                <td id="name">
		                	<a href="javascript:;" class="btn large radius-all-4">
					            <span class="button-content"></span>
			                </a>
		                </td>
		                <td class="font-size-17" id="visitCount"></td>
		                <td class="font-size-17" id="registerCount"></td>
		                <td class="font-size-17" id="newTradeUserCount"></td>
		                <td class="font-size-17" id="orderCount"></td>
		                <td class="font-size-17" id="paidOrderCount"></td>
		                <td class="font-size-17" id="paymentAmount"></td>
		                <td class="font-size-17" id="operate"></td>
		            </tr>
	        </thead>
	        <tbody>
	        	<#list statistics.list as statistic>
					<tr id="tr-bigger-category-id-${statistic.biggerCategoryId}">
		                <td>
		                	<a href="javascript:;" class="btn large radius-all-4 font-black" onclick="showPopularizeByBiggerCategoryId(${statistic.biggerCategoryId}, '${startDate?string('yyyy-MM-dd')}', '${endDate?string('yyyy-MM-dd')}');">
					            <span class="button-content">${statistic.biggerCategoryName}</span>
			                </a>
		                </td>
		                <td class="font-size-17">${statistic.visitCount}</td>
		                <td class="font-size-17">${statistic.registerCount}</td>
		                <td class="font-size-17">${statistic.newTradeUserCount}</td>
		                <td class="font-size-17">${statistic.orderCount}</td>
		                <td class="font-size-17">${statistic.paidOrderCount}</td>
		                <td class="font-size-17">${statistic.paymentAmount}</td>
		                <td class="font-size-17">
		                	<a target="_blank" href="/channels/analyse?biggerCategoryId=${statistic.biggerCategoryId}&startDate=${startDate?string('yyyy-MM-dd')}&endDate=${endDate?string('yyyy-MM-dd')}" class="btn medium primary-bg radius-all-4" id="search" title="Validate!" onclick="analyseByDate();">
				            	<span class="button-content">分析</span>
		                	</a>
		                </td>
		            </tr>
				</#list>    
	    	</tbody>
	    </table>
	    <div class="button-group center-div">
	    	${pagerHelper.content}
	    </div>
    </div>
</div>
<div id="popularize-statistic-template" class="hide">
	<table class="table">
        <thead>
            <tr>
            	<th>推广</th>
                <th>访问IP数</th>
                <th>注册数</th>
                <th>新增交易用户数</th>
                <th>交易订单数</th>
                <th>成功交易订单数</th>
                <th>成功交易金额</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<script>

// 显示推广统计
function showPopularizeStatistic(rowId){

	var row = $('#popularizestatistics tbody tr[id=' + rowId + ']');
	var template = $('#popularize-statistic-template').clone();
	var table = template.find('table tbody');
	var newRow = $(row).clone();
	newRow.find('#name a').removeAttr('onclick');
	table.append(newRow);
	
	var html = '<div id="dialog" class="hide" title=""><div class="mrg10A">' + template.html() + '</div></div>';
	$( html ).dialog({
        resizable:!0,
        minWidth:1000,
        minHeight:300,
        modal:!0,
        dialogClass:"modal-dialog",
        closeOnEscape:!0,
        close : function() {
			$( this ).dialog( "destroy" );
		},
        buttons: {
            关闭: function() {
            	$( "#dialog" ).dialog( "close" );
            }
		}
	});

}

// 根据日期分析
function analyseByDate(object){
	
	var url = '/popularizestatistic/popularizes?startDate=' + $('#startDate').val() + '&endDate=' + $('#endDate').val();
	window.location.href=url;
}

// 根据大类ID显示推广统计
function showPopularizeByBiggerCategoryId(id, startDate, endDate){
	
	var biggerCategory = $('table tbody tr[id=tr-bigger-category-id-' + id + ']');
	if(biggerCategory.attr('isLoad')){
		if(biggerCategory.attr('isShow') == 'true'){
			$('table tbody tr[bigger-category-id=' + id + ']').hide();
			biggerCategory.attr('isShow', false);
		}else{
			$('table tbody tr[bigger-category-id=' + id + ']').show();
			biggerCategory.attr('isShow', true);
		}
	}else{
		$.get('/popularizestatistic/biggercategory/' + id + '/' + startDate + '/' + endDate + '.json',
		function(data){
		  
		  for(var i = data.length - 1; i >=0; i--){
		  
		    var categoryId = data[i].categoryId;
		    
		  	var row = $('#statistic-tr-template').clone();
		   	row.removeAttr('class');
		   	
		   	row.attr('id', 'tr-category-id-' + categoryId);
		   	row.attr('bigger-category-id', id);
		   	row.attr('class', 'font-green');
		   	
		   	row.find('#name a').addClass('font-green');
		  	row.find('#name span').html(data[i].categoryName);
		  	row.find('#name').attr('class', 'pad20L');
		  	row.find('#visitCount').html(data[i].visitCount);
		  	row.find('#registerCount').html(data[i].registerCount);
		  	row.find('#orderCount').html(data[i].orderCount);
		  	row.find('#paidOrderCount').html(data[i].paidOrderCount);
		  	row.find('#newTradeUserCount').html(data[i].newTradeUserCount);
		  	row.find('#paymentAmount').html(data[i].paymentAmount);
		  	
		  	if(data[i].categoryName != '停止推广'){
		   		var clickFunction = 'showPopularizeByCcategoryId(' + id + ', ' + categoryId + ', "' + startDate + '", "' + endDate + '")';
		   		row.find('#name a').attr('onclick', clickFunction);
		   		
		   		var url = '/channels/analyse?categoryId=' + categoryId + '&startDate=' + startDate + '&endDate=' + endDate;
		  		row.find('#operate').html('<a target="_blank" class="btn medium primary-bg radius-all-4" href="' + url + '"><span class="button-content">分析</span></a>');
		   	}
		  		
		  	biggerCategory.after(row);
		  }
		  
		  biggerCategory.attr('isLoad', true);
		  biggerCategory.attr('isShow', true);
		})
		.fail(function() {
		    $.jGrowl("统计推广失败", {sticky:!1,position:"top-right",theme:"bg-red"});
		});
	}
};

// 根据类别ID显示推广统计
function showPopularizeByCcategoryId(biggerCategoryId, categoryId, startDate, endDate){
	var category = $('table tbody tr[id=tr-category-id-' + categoryId + ']');
	if(category.attr('isLoad')){
		if(category.attr('isShow') == 'true'){
			$('table tbody tr[category-id=' + categoryId + ']').hide();
			category.attr('isShow', false);
		}else{
			$('table tbody tr[category-id=' + categoryId + ']').show();
			category.attr('isShow', true);
		}
	}else{
		$.get('/popularizestatistic/category/' + biggerCategoryId + '/' + categoryId + '/' + startDate + '/' + endDate + '.json',
		function(data){
		  
		  	for(var i = data.length - 1; i >=0; i--){
		  	
		  		var row = $('#statistic-tr-template').clone();
		   		row.removeAttr('class');
		   		row.attr('id', data[i].popularizeId);
		   		row.attr('bigger-category-id', biggerCategoryId);
		   		row.attr('category-id', categoryId);
		   		row.attr('class', 'font-red');
		   	
		  		row.find('#name span').html(data[i].popularizeName);
		  		row.find('#name').attr('class', 'pad25L');
		  		row.find('#name a').addClass('font-red');
		  		row.find('#name a').attr('onclick', 'showPopularizeStatistic(' + data[i].popularizeId + ');');
		  		row.find('#visitCount').html(data[i].visitCount);
		  		row.find('#registerCount').html(data[i].registerCount);
		  		row.find('#orderCount').html(data[i].orderCount);
		  		row.find('#paidOrderCount').html(data[i].paidOrderCount);
		  		row.find('#newTradeUserCount').html(data[i].newTradeUserCount);
		  		row.find('#paymentAmount').html(data[i].paymentAmount);
		  		
		  		if(data[i].popularizeName != '停止推广'){
		  			var url = '/channels/analyse?popularizeId=' + data[i].popularizeId + '&startDate=' + startDate + '&endDate=' + endDate;
		  			var html = '<a target="_blank" class="btn medium primary-bg radius-all-4" href="' + url + '"><span class="button-content">分析</span></a>'
		  			html += '<a target="_blank" class="btn medium primary-bg radius-all-4 mrg5L" href="/popularizevisits?popularizeId=' + data[i].popularizeId + '"><span class="button-content">明细</span></a>';
		  			row.find('#operate').html(html);
		  		}
		  		
		  		category.after(row);
		  	}
		  
		  	category.attr('isLoad', true);
		  	category.attr('isShow', true);
		})
		.fail(function() {
		    $.jGrowl("统计推广失败", {sticky:!1,position:"top-right",theme:"bg-red"});
		});
	}
};
</script>